<!-- 选择门诊 -->
<template>
	<view class="container">
	<!-- 	<view style="padding: 28rpx 36rpx;" class="search">
			<up-search placeholder="请输入搜索内容" :showAction="false" v-model="search"></up-search>
		</view> -->
		<view class="row-start" v-if="classData.length != 0">
			<!-- 左侧分类 -->
			<scroll-view scroll-y class="left-content" :style="{height:`calc(100vh - ${searchHeight}px)`}">
				<view class="item-content" v-for="(item, index) in classData" :key="item.departmentId" :class="tabIndex == index && 'active'" @click="onSelectClass(item, index)">
					{{ item.department }} 
				</view>
			</scroll-view>	
			
			<!-- 右侧内容 -->
			<scroll-view scroll-y :style="{height:`calc(100vh - ${searchHeight}px)`}" v-if="registeredList.length != 0">
				<view class="ccontent" v-for="(item, index) in registeredList" :key="index" @click="onNavRegister(item, index)">
					{{ item.type }}
				</view>
			</scroll-view>
			
			<empty v-else></empty>
		</view>
		<empty v-else></empty>
	</view>
</template>

<script setup>
	import { onLoad } from "@dcloudio/uni-app";
	import { reactive, ref } from "vue";
	import { getCurrentInstance } from 'vue';
	
	
	
	import {
		departmentList,
		registeredTypeList
	} from "@/api/index.js"
	
	const instance = getCurrentInstance();

	
	const search = ref("");
	
	const classData = ref([])
	const tabIndex = ref(0)
	const registeredList = ref([])
	const searchHeight = ref(0)
	
	const contentList = ref([])
	
	// 是否选中内容
	const isSelectContent = ref();
	
	const pageInfo = ref({
		page:1,
		limit:7
	})
	
	const departmentData = ref(null);
	
	onLoad(() => {
		// contentList.value = classData[0].content;
		// const query = uni.createSelectorQuery().in(instance.proxy);
		// query
		//   .select(".search")
		//   .boundingClientRect((data) => {
		//     console.log("得到布局位置信息", data);
		// 	// classHeight.value
		// 	searchHeight.value = data.height;
		//   })
		//   .exec();
		  
		  getDepartmentList()
	})
	
	// 获取科室列表

	function getDepartmentList() {
		departmentList(pageInfo.value).then(res=> {
			console.log("res", res)
			classData.value = res.data;
			departmentData.value = res?.data[0];
			
			getRegisteredTypeList()
		})
	}
	// 获取挂号类型列表
	function getRegisteredTypeList() {
		registeredTypeList(pageInfo.value).then(res=> {
			registeredList.value = res.data
		})
	}
	
	
	function onSelectClass(item, index) {
		console.log("item", item)
		departmentData.value = item
		uni.showLoading({})
		tabIndex.value = index;
		contentList.value = item.content;
		setTimeout(()=>{uni.hideLoading()},500)
	}
	
	function onNavRegister(item, index) {
			console.log("执行了")
			
			uni.setStorageSync('Department', {departmentId:departmentData.value.departmentId,registeredid:item.registeredId})
			uni.navigateTo({
				url: `/view/register/register/index?type=${item.type}&department=${departmentData.value.department}`
			})
		}

	

</script>

<style lang="scss">
	.container {
		.left-content {
			background-color: rgb(242,242,242);
			width: 260rpx;
			height: 100%;
			.item-content {
				height: 142rpx;
				
				font-family: 思源黑体;
				font-size: 28rpx;
				font-weight: normal;
				line-height: normal;
				letter-spacing: normal;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		
		.ccontent {
			padding: 20rpx 32rpx;
			
			
			font-family: 思源黑体;
			font-size: 28rpx;
			font-weight: normal;
			line-height: normal;
			letter-spacing: normal;
			/* 正文色/正文色 */
			color: #1A1A1A;
			border-bottom: 1rpx solid #D8D8D8;
			
			// &:last-child {
			// 	border-bottom:none;
			// }
		}
		.ccontent:active {
			background-color: rgba(0,0,0,.1);
		}
		
	}
	.active {
		background-color: #FFF;
		color: #9E9E9E;
	}
	.row-start {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
	}
</style>